<template>
    <div class="demo-image">
        <div v-for="(item,index) in list" :key="index" class="block">
           
            <el-image style="width: 250px; height: 250px" :src="item.img" :fit="cover" />
            <span class="demonstration" :title="item.name">{{ item.name }}</span>
            <el-row >
                <el-col :span="10" class="demonstration"><el-button round plain>￥ {{ item.price }}&nbsp;&nbsp;</el-button></el-col>
            <el-button :icon="Search"   class="demonstration" @click="routeClick(item.id)" plain circle> 
                <el-col :span="4" ><el-icon color="#000" size="15"><View /></el-icon></el-col>
            </el-button>
            <el-button type="primary" class="demonstration" @click="cartAdd(item.id)" plain circle>
                <el-col :span="4" ><el-icon color="#000" size="15"><ShoppingCart /></el-icon></el-col>
            </el-button>
            <el-button color="#626aef" class="demonstration" @click="orderAdd(item.id) " plain circle>
                <el-col :span="4"  ><el-icon color="#000" size="15"><ShoppingBag /></el-icon></el-col>
            </el-button>
            </el-row>
        </div>
    </div>
</template>

<script>

import { useGoodsStore } from '../../../store/goods.js';

import { ElMessageBox } from 'element-plus';


export default {
    props:['list'],
    data() {
        return {
          data:[],
          store:useGoodsStore(),
          icon:'',
          time:new Date(),
          orderId:'',
          multipleSelection:[]
        }
    },

    methods: {
        routeClick(val){
            this.data=this.list.find( v=> v.id==val)
            this.$router.push({path:'/detail',query:this.data})
           
        },
        cartAdd(val){
            ElMessageBox.alert('是否添加到购物车', '这是个小提示~', {
                confirmButtonText: '你知道的，我很爱她',
            })
            this.data=this.list.find( v=> v.id==val)
            this.store.cartAdd({
                id:this.data.id,
                name:this.data.name,
                price:this.data.price,
                onlinePrice:this.data.onlinePrice,
                num:1,
                total:this.data.onlinePrice
            });
        },
        orderAdd(val){
            //订单号
            this.orderId=this.time.getFullYear().toString() +(this.time.getMonth()+1).toString()+
            this.time.getDate().toString()+Math.random().toString().slice(2,10)
            console.log(this.orderId);
            let num =0
            let sum =0
            //从选中的商品中进行便利循环，把每个商品的数量和金额进行相加
            this.data=this.list.find( v=> v.id==val)

            console.log(num);
            console.log(sum);
            console.log(this.data);
            //把相关的数据添加到store中的订单数组里
           
       
            
            this.store.orderAdd({
                orderId:this.orderId,
                time:this.time,
                num:1,
                sum:this.data.onlinePrice,
                isOrdered:false,        //这个变量用来记录订单是否已经完成支付
                child:[
                   {
                    id:this.data.id,
                    name:this.data.name,
                    price:this.data.price,
                    onlinePrice:this.data.onlinePrice,
                    num:1,
                    total:this.data.onlinePrice
                   }
                ]///展开运算符把一个数组逐一进行操作，相当于进行了循环
            })
            console.log(this.store.orderData);
            }
    },

}
</script>








<style scoped>

.demo-image .block {
  padding: 10px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
  vertical-align: top;
}
.demo-image .block:last-child {
  border-right: none;
}
.demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.hidden{
    margin: 0 auto;
    width: 200px;
    height: 20px;
    overflow: hidden;
    text-overflow:ellipsis ;
    display: -webkit-box !important;
    /* -webkit-line-clamp: 1; */
    -webkit-box-orient: vertical;
}

</style>